<template>
    <n-layout class="layout">
        <n-layout-header bordered class="layout-header">
            <div class="layout-header-left">
                <!--          <n-avatar-->
                <!--              round-->
                <!--              :size="40"-->
                <!--              :src="getImageUrl('logo/logo.png')"-->
                <!--          />-->
                <n-image
                    class="layout-header-left-logo"
                    :src="getImageUrl('logo/logo.png')"
                    alt="展示图片"
                />
                <n-text class="layout-header-left-title">{{ siteConfig.title }}</n-text>
            </div>
            <div class="layout-header-right">
                <ThemeColorSelect/>
                <ThemeSelect/>
            </div>
        </n-layout-header>
        <div class="layout-content">
            <div class="layout-content-form">
                <n-card class="layout-content-form-card">
                    <div class="layout-content-form-card-top">
                        <img
                            class="layout-content-form-card-top-logo"
                            :src="getImageUrl('logo/logo-title.png')"
                            alt="展示图片"
                        />
                    </div>
                    <n-form
                        ref="formRef"
                        label-placement="left"
                        size="large"
                        :model="formModelRef"
                        :rules="rules"
                    >
                        <n-form-item path="username">
                            <n-input
                                v-model:value="formModelRef.username"
                                type="text"
                                maxlength="16"
                                placeholder="请输入用户名"
                            >
                                <template #prefix>
                                    <n-icon size="18">
                                        <PersonOutlineIcon></PersonOutlineIcon>
                                    </n-icon>
                                </template>
                            </n-input>
                        </n-form-item>
                        <n-form-item path="password">
                            <n-input
                                v-model:value="formModelRef.password"
                                type="password"
                                maxlength="16"
                                show-password-on="click"
                                placeholder="请输入密码"
                            >
                                <template #prefix>
                                    <n-icon size="18">
                                        <LockClosedOutlineIcon></LockClosedOutlineIcon>
                                    </n-icon>
                                </template>
                            </n-input>
                        </n-form-item>
                        <n-form-item>
                            <n-button
                                type="primary"
                                @click="handleSubmit"
                                size="large"
                                :loading="loading"
                                block
                            >登录
                            </n-button>
                        </n-form-item>
                    </n-form>
                </n-card>
            </div>
        </div>
        <n-layout-footer class="layout-bottom" bordered>
            <n-text>版权声明，备案链接</n-text>
        </n-layout-footer>
    </n-layout>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
// import shuffle from 'lodash/shuffle'
import {siteConfig} from '@/config'
import {LockClosedOutline as LockClosedOutlineIcon, PersonOutline as PersonOutlineIcon} from '@vicons/ionicons5'
import {ThemeColorSelect} from '@/components/ThemeColorSelect'
import {ThemeSelect} from '@/components/ThemeSelect'
import {useUserStore} from "@/stores";
import {getImageUrl} from "@/utils";


const formRef = ref()
const loading = ref(false)
// const show = ref(false)
// const showBg = ref(false)
const userStore = useUserStore()

onMounted(() => {
    // setTimeout(() => {
    //   show.value = true
    // }, 300)
    // setTimeout(() => {
    //   showBg.value = true
    // }, 100)
})

const formModelRef = reactive({
    username: 'admin',
    password: '123456',
})

const rules = {
    username: {
        required: true,
        message: "请输入用户名",
        trigger: 'blur',
    },
    password: {
        required: true,
        message: "请输入密码",
        trigger: 'blur',
    },
}

// 定时器
// const shuffleTimiing = ref()

// 轮播图
// const carouselImgList = ['one', 'two', 'three']

// 背景图
// const bgList = ref([
//   'bar_y',
//   'bar_x',
//   'line_gradient',
//   'line',
//   'funnel',
//   'heatmap',
//   'map',
//   'pie',
//   'radar',
// ])

// 处理url获取
// const getImageUrl = () => {
//   return new URL(`../../assets/login/tib_logo.png`, import.meta.url).href
// }

// 打乱
// const shuffleHandle = () => {
//   shuffleTimiing.value = setInterval(() => {
//     bgList.value = shuffle(bgList.value)
//   }, carouselInterval)
// }

// 点击事件
const handleSubmit = () => {
    userStore.login(formModelRef.username, formModelRef.password)
}

onMounted(() => {
    // shuffleHandle()
})
</script>

<style lang="scss" scoped>
@use "login";
</style>
